<template>
  <u-mask :show="show" @click="$emit('close', false)">
    <view class="poster-main">
      <image :src="imageUrl" mode="aspectFill" class="poster-image"/>
      <button hover-class='hover' class="poster-btn" @click.stop="_onSave">保存到相册</button>
    </view>
  </u-mask>
</template>

<script>
export default {
  name: 'posterModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    imageUrl: {
      type: String,
      required: true
    }
  },
  methods: {
    _onSave() {
      const this_ = this
      wx.saveImageToPhotosAlbum({
        filePath: this_.imageUrl,
        success: function (res) {
          wx.showToast({
            title: '保存成功',
            duration: 500
          })
          this_.$emit('close', false)
        },
        fail(err) {
          if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
            wx.showModal({
              title: '提示',
              content: '需要您授权保存相册',
              showCancel: false,
              success: modalSuccess => {
                wx.openSetting({
                  success(settingdata) {
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限成功,再次点击图片即可保存',
                        showCancel: false,
                      })
                    } else {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限失败，将无法保存到相册哦~',
                        showCancel: false,
                      })
                    }
                  },
                  // fail(failData) {
                  //   console.log("failData", failData)
                  // },
                  // complete(finishData) {
                  //   console.log("finishData", finishData)
                  // }
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.poster-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .poster-image {
    width: 560rpx;
    height: 1008rpx;
  }

  .poster-btn {
    width: 564rpx;
    height: 80rpx;
    margin-top: 48rpx;
    border-radius: 8rpx;
    font-size: 32rpx;
    line-height: 80rpx;
    text-align: center;
    color: #ffffff;
    background: $themeColor;
  }
}
</style>